<template>
  <div class="hom1-container">
    <div class="left">
      <ul class="card-ul-1 gap-10 flex">
        <li class="card-box flex1">
          <p class="text-title-label">老年人能力等级</p>
          <div class="icon-list">
            <div class="icon-list-item" v-for="(item, index) in levelList" :key="index">
              <img :src="item.icon" class="icon-img" alt="" />
              <p>{{ item.label }}</p>
              <p :style="{ color: item.color }">{{ item.value || 0 }}%</p>
            </div>
          </div>
        </li>
        <li class="card-box flex1">
          <p class="text-title-label">老年人居住情况（万人）</p>
          <AplidCharts ref="chartEl1" :option="barChart()" style="width: 100%; height: 100%"></AplidCharts>
        </li>
      </ul>

      <ul class="card-ul-2 gap-10">
        <li class="card-box flex1">
          <p class="text-title-label">各区老年人户籍人口（万人）</p>
        </li>
        <AplidCharts ref="chartEl1" :option="barChartTwo()" style="width: 100%; height: 85%"></AplidCharts>
      </ul>

      <ul class="card-ul-3 gap-10 flex">
        <li class="card-box flex1">
          <p class="text-title-label">老年人口变化趋势（万人）</p>
          <AplidCharts ref="chartEl1" :option="lineChartOne()" style="width: 100%; height: 85%"></AplidCharts>
        </li>
        <li class="card-box flex1">
          <p class="text-title-label">政府购买扶助对象</p>
          <AplidCharts ref="chartRadarEl" :option="radarChart()" style="width: 100%; height: 85%"></AplidCharts>
        </li>
      </ul>
    </div>
    <div class="main">
      <TabCheck :tabs="tabsCenter" v-model="activeTab" @update:modelValue="handleTabChange" class="tab-box"></TabCheck>
      <MapMain :key="activeTab" :activeTab="activeTab"></MapMain>
    </div>
    <div class="right">
      <ul class="card-ul-1 gap-10 flex">
         <li class="card-box flex1">
          <p class="text-title-label">机构性质</p>
          <div class="org-rate-chart">
            <AplidCharts ref="chartOrgEl2" :option="pieChartOrg3(1)"
              style="width: 100%; height: 100%; position: absolute"></AplidCharts>
            <div class="text-content">
              <p class="text-value">{{ globalQuery["home1"]?.value || 10 }}%</p>
              <p class="text-label">
                {{ globalQuery["home1"]?.name || "事业单位" }}
              </p>
            </div>
          </div>
        </li>
        <li class="card-box flex1">
          <p class="text-title-label">各区家庭养老床位数量</p>
          <div class="org-rate-chart">
            <barChartPage  style="width: 100%; height: 85%; position: absolute"/>
            <!-- <div
              class="icon-right-list-item"
              v-for="(item, index) in orgSList"
              :key="index"
            >
              <img :src="item.icon" class="icon-img" alt="" />
              <div class="text-left">
                <p>{{ item.label }}</p>
                <p
                  :style="{ color: item.color, marginTop: '10px' }"
                  class="value"
                >
                  {{ item.value || 0 }}
                </p>
              </div>
            </div> -->
          </div>
        </li>
       
      </ul>

      <ul class="card-ul-2 gap-10">
        <li class="card-box flex1">
          <p class="text-title-label">各区机构数量、床位数量</p>
          <AplidCharts ref="chartOrg12El" :option="barChart12(org12_DATA, 1)" style="width: 100%; height: 200px">
          </AplidCharts>
        </li>
      </ul>

      <ul class="card-ul-3 gap-10 flex">
        <li class="card-box flex1">
          <p class="text-title-label">机构等级</p>
          <AplidCharts ref="chartPie3dEl" type="Pie3d" :option="Pie3d(levelLenend)"
            style="width: 100%; height: 80%; position: absolute; top: 0"></AplidCharts>
          <LegendBox :data="levelLenend" unit='%'></LegendBox>
        </li>
        <li class="card-box flex1">
          <p class="text-title-label">床位类型</p>
          <div class="flex gap-10 align-center h-80">
            <div class="text-center" v-for="(item, index) in bedList" :key="index">
              <div class="progress" :style="{
                '--progress': item.progress,
                '--last': '20%',
                '--after-bg': item.afterColor,
                '--before-bg': item.beforeColor,
              }">
                <img :src="item.icon" alt="" class="progress-img" />
              </div>
              <p style="
                  color: var(--before-bg);
                  padding: 20px 0;
                  font-size: 18px;
                  font-weight: 700;
                ">
                {{ item.value }}
              </p>
              <p style="font-size: 12px">{{ item.label }}</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import TabCheck from "./components/TabCheck/index.vue";
import MapMain from "@/views/aplid/MapMain/index.vue";
import { getAssetsFile } from "@/utils/index";
import {
  barChart,
  barChartTwo,
  lineChartOne,
  barChart12,
  RateChart,
  Pie3d,
  pieChartOrg2,
  pieChartOrg3,
  radarChart,
} from "./config";
import { useCommonStore } from "@/stores/common";
import barChartPage from './barChart/index.vue'

const { setGlobalData } = useCommonStore();

const { globalQuery } = storeToRefs(useCommonStore());
const router = useRouter();

const chartPie3dEl = ref(null);
const activeTab = ref("1");
const chartOrgEl2 = ref(null);
const org12_DATA = [
  { label: "玄武区", value: 15, value2: 2879 },
  { label: "秦淮区", value: 51, value2: 5154 },
  { label: "建邺区", value: 12, value2: 2123 },
  { label: "鼓楼区", value: 45, value2: 5802 },
  { label: "栖霞区", value: 30, value2: 3993 },
  { label: "雨花台区", value: 20, value2: 2257 },
  { label: "江宁区", value: 31, value2: 5432 },
  { label: "浦口区", value: 11, value2: 2407 },
  { label: "六合区", value: 16, value2: 3085 },
  { label: "溧水区", value: 11, value2: 2379 },
  { label: "高淳区", value: 13, value2: 2840 },
  { label: "江北新区", value: 20, value2: 2138 },
];
const tabsCenter = [
  { label: "养老机构", value: "1" },
  { label: "社区居家养老服务设施", value: "2" },
];
const levelLenend = [
  {
    name: "一级",
    value: 10,
    itemStyle: {
      color: "#69D5E9",
    },
  },
  {
    name: "二级",
    value: 39,
    itemStyle: {
      color: "#1877E6",
    },
  },
  {
    name: "三级",
    value: 26,
    itemStyle: {
      color: "#FDBD00",
    },
  },
  {
    name: "四级",
    value: 16,
    itemStyle: {
      color: "#9138EF",
    },
  },
  {
    name: "五级",
    value: 5,
    itemStyle: {
      color: "#77C484",
    },
  },
  {
    name: "未评级",
    value: 4,
    itemStyle: {
      color: "#E8BA65",
    },
  },
];

const levelList = [
  {
    label: "失能",
    value: "12",
    icon: getAssetsFile("icon-hom1/icon-1.webp"),
    color: "rgba(219, 0, 253, 1)",
  },
  {
    label: "半失能",
    value: "18",
    icon: getAssetsFile("icon-hom1/icon-2.webp"),
    color: "rgba(253, 189, 0, 1)",
  },
  {
    label: "自理",
    value: "70",
    icon: getAssetsFile("icon-hom1/icon-3.webp"),
    color: "rgba(5, 247, 173, 1)",
  },
];

const orgSList = [
  {
    label: "机构总数",
    value: "277",
    icon: getAssetsFile("icon-hom1/icon-4.webp"),
    color: "rgba(22, 200, 255, 1)",
  },
  // {
  //   label: "床位总数",
  //   value: "42521",
  //   icon: getAssetsFile("icon-hom1/icon-5.webp"),
  //   color: "rgba(22, 200, 255, 1)",
  // },
  // {
  //   label: "入住总数",
  //   value: "20412",
  //   icon: getAssetsFile("icon-hom1/icon-6.webp"),
  //   color: "rgba(22, 200, 255, 1)",
  // },
  // {
  //   label: "入住率",
  //   value: "48%",
  //   icon: getAssetsFile("icon-hom1/icon-7.webp"),
  //   color: "rgba(253, 189, 0, 1)",
  // },
];

const bedList = [
  {
    label: "日间照料床位",
    value: 874,
    icon: getAssetsFile("icon-hom1/icon-8.webp"),
    afterColor: "#272452ff",
    beforeColor: "#9c4ef7ff",
    progress: "60%",
  },
  {
    label: "全托床位",
    value: 42521,
    icon: getAssetsFile("icon-hom1/icon-9.webp"),
    afterColor: "#0c3c55ff",
    beforeColor: "#0dcefcff",
    progress: "70%",
  },
  {
    label: "公益性兜底床位",
    value: 10331,
    icon: getAssetsFile("icon-hom1/icon-10.webp"),
    afterColor: "#392420ff",
    beforeColor: "#f78614ff",
    progress: "80%",
  },
];

const handleTabChange = (e) => {
  router.push(e == "1" ? "/Home1" : "/Home1Facilities");
};

onMounted(() => {
  setGlobalData({}, "home1");
});
onUnmounted(() => {
  setGlobalData({}, "home1");
});
</script>

<style scoped lang="scss">
@import "./main.scss";
</style>
